﻿@model borkoSi.ViewModels.HomeViewModel

@{   
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "borkoSi";
}

@section Head{

    <!-- CSS stylesheet file for PointPoint -->
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Addons/pointPoint/jquery.pointpoint.css")"/>
        
}

<div class="body-left-home">
    <div class="proverb">
        <div id="proverb-content">
            @Model.ProverbContent
        </div>
        <div id="proverb-author">
            @if(Model.ProverbLink != "")
            {
                <a href="@Model.ProverbLink" target="_blank">@Model.ProverbAuthor</a>
            }
            else
            {
                @Model.ProverbAuthor
            }
        </div>
    </div>    
    
    <div class="blog">
        <hr />
        @foreach(var i in Model.Articles)
        {  
        <div class="article">  
            <div class="article-header">
                <a href="@Url.Action("Index", "Gallery", new { id = @i.GalleryId }, null)">
                    <div id="article-title">@i.NewsIdRoman &nbsp;&nbsp;&nbsp; @i.Title</div>
                </a>
                <div id="article-date">@i.DateCreated.ToString("dd.MM.yyyy")</div>
            </div>
            <div class="article-content">
                @i.Content
            </div>
        </div>
        <hr />
        }
    </div>
</div>

<div class="body-right-home">
    <div class="homepage-title" id="first">@borkoSi.Resources.Home.Index.ThisIsUs</div>
    <div id="a">
        <div id="galeryFlickr" style="width: 190px; height: 145px; background: #000; margin-top: 10px;">
        </div>
    </div>
    
    <div class="space"></div>

    <div class="birthday-countdown-container">
        <div class="homepage-title">@borkoSi.Resources.Home.Index.MyBirthdayIn</div>
        <div class="birthday-countdown-birthdays"> 
        @foreach(var i in Model.Birthdays)
        {
            
            <span class="birthday-countdown-name">@i.Name</span>
            <div class="birthday-countdown clearfix" id="birthday-@i.Name"></div>
            
        }
        </div>
    </div>
</div>

@section Scripts {
    
    <script type="text/javascript" src="@Url.Content("/Scripts/myFunctions.js")"></script>

    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    
    <!-- countdown -->
    <script type="text/javascript" src="@Url.Content("/Scripts/jquery.countdown.js")"></script>
    
    <!-- Galleria -->
    <script src="../../Addons/galleria/galleria-1.2.9.min.js" type="text/javascript"></script>
    <script src="../../Addons/galleria/plugins/flickr/galleria.flickr.min.js" type="text/javascript"></script>

    <!-- PointPoint -->
	<script type="text/javascript" src="@Url.Content("/Addons/pointPoint/transform.js")"></script>
	<script type="text/javascript" src="@Url.Content("/Addons/pointPoint/jquery.pointpoint.js")"></script>

    <script type="text/javascript">

        $(document).ready(function (){
            
            // pointPoint points to 'galleryFlickr'
            //pointPoint('galeryFlickr');

        });

        // birthdays
        $(function () {

            @foreach(var i in Model.Birthdays)
            {
                <text>
                    var birthDate = new Date(
                                        @i.Year,
                                        @i.Month - 1,
                                        @i.Day,
                                        @i.Hour,
                                        @i.Minute,
                                        @i.Second);

                    $('#birthday-' + '@i.Name').countdown({
                        date: birthDate,
                        refresh: 60000,
                        render: function (data) {
                            var time = $(this.el);
                            time.empty()
                                .append("<div>" + this.leadingZeros(data.days, 3) + " <span>days</span></div>")
                                .append("<div>" + this.leadingZeros(data.hours, 2) + " <span>hrs</span></div>")
                                .append("<div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div>");
                        }
                    });
                </text>
            }
        });

        // galery
        Galleria.loadTheme('../../Addons/galleria/themes/classic/galleria.classic.min.js');
        Galleria.configure({
            autoplay: 10000,
            imageCrop: false,
            imageMargin: 0,
            transition: "fade",
            transitionSpeed: 2000,
            showCounter: false,
            showInfo: false,
            showImagenav: false,
            thumbnails: false,
            clicknext: true,
        });

        Galleria.run('#galeryFlickr', {
            flickr: 'set: @Model.GallerySetNumber',
            flickrOptions: {
                max: 10,
                imageSize: 'medium'
            }
        });

    </script>

}